|
《选择题---组件》的制作方法
【实例说明】：
本例制作一个使用组件知识创作的选择题的动画的效果。
【操作步骤】：
〖一〗、新建文档
- 单击“文件”/“新建”命令，创建一个新文档；
- 单击“修改”/“文档”命令；在“文档属性”对话框中设置“尺寸”为300×500，背景色为白色；单击“确定”按钮。
〖二〗、制作“背景层”
- 双击“图层1”；然后将其命名为“背景层”；
- 然后选择工具栏上的工具参照下面的背景图形绘制如下背景：
2_clip_image002.jpg)
〖三〗、创建“题目”图层
- 选中“背景”图层；单击时间轴上的添加新图层按钮，再添加一个新图层；然后双击该图层将其命名为“题目层”；
- 选择工具栏上的文本工具；然后输入以下文本信息（也可以随意找一道选择题输入即可）；参照下图：
2_clip_image004.jpg)
- 选中该图层的第2帧；按F6键插入“关键帧”；将以上的第1题修改为另一道选择题目。如下图：
2_clip_image006.jpg)
〖四〗、为题目图层添加“单选按钮”组件并添加相应的代码
- 选中“题目”图层的第1帧；执行“窗口”/“组件”，打开“组件”对话框；单击“User? Interface”文件夹前面的“＋”号打开该文件夹；从中找到“RadioButton”单选按钮；拖放该按钮到舞台上，共拖放4次即拖放四个单选按钮到第1题选择题目的下面，并排列好它们的次序；如下图：
2_clip_image008.jpg)
- 执行“窗口”/“组件检查器”，打开组件检查器对话框；选中第1个“Radio Button”按钮；单击“组件检查器”的“参数”选项卡；找到label后面的“Radio Button”项；然后将“Radio Button”英文全部选中删除掉；再输入第1个选项的文字即可（比如本例中的“特别的美”选项）；采用这种方法，再依次选中第2、3、4个“Radio Button”按钮；找到相应的值修改成相应的选项文字。这样这四个单选按钮就变成了四个选项。本例中的四个选项仿次为“特别的美”、“特别不丑”、“丑的特别”、“特别的丑”。
- 首先选中第1个单选按钮“特别的美”；打开动作面板为其添加如下代码：
on (click) {
_root.da1 = "特别的美";
}
- 选中第2个单选按钮“特别不丑”；打开动作面板为其添加如下代码：
on (click) {
_root.da1 = "特别不丑";
}
- 选中第3个单选按钮“丑的特别”；打开动作面板为其添加如下代码：
on (click) {
_root.da1 = "丑的特别";
}
- 选中第4个单选按钮“特别的丑”；打开动作面板为其添加如下代码：
on (click) {
_root.da1 = "特别的丑";
}
特别说明：从上面的代码细心的读者可能已经发现了一个规律：这就是代码中的文本和选项的文本要保证绝对的一致哦，切记！否则，在测试影片的时侯就要出错了。
- 选中“题目”图层的第2帧；参照上面第1题的单选按钮的添加方法为第2题的题目添加单选按钮并为他们添加相应的代码（代码也只需要修改一下文字就可以了）；
〖五〗、制作“结果层”
- 选中“题目”图层；单击时间轴上的添加新图层按钮，再添加一个新图层；然后双击该图层将其命名为“结果层”；
- 选择工具栏上的文本工具；然后输入以下文本信息（文本信息包括：“你的选择是”）；参照下图：
2_clip_image010.jpg)
- 选中工具栏上的文本工具，打开属性面板；选择“动态文本”、字体颜色选黑色；然后在“你的选择是”后面的拖出能够显示五个文字的动态文本框；然后选中该文本框，在变量名中命名为“da1”; 位置在上图中的上面的黑矩形框处（注意该黑矩形条只是为了说明位置而随意绘制的，本例的制作不用制作黑矩形条）；
- 选中工具栏上的文本工具，打开属性面板；选择“动态文本”、字体颜色选黑色；然后在“你的选择是”后面的动态文本框；然后选中该文本框的下面再拖放一个动态文本框，在变量名中命名为“da2” 位置在上图中的上面的黑矩形框处（注意该黑矩形条只是为了说明位置而随意绘制的，本例的制作不用制作黑矩形条）；
〖六〗、制作“按钮”图层
- 添加一个新的图层，并命名为“按钮”层；
- 打开“组件”面板；单击“User? Interface”文件夹前面的“＋”号打开该文件夹；从中找到“Button”按钮；拖放该按钮到舞台上；再打开“组件检查器”；单击“组件检查器”的“参数”选项卡；找到label后面的“Button”项；然后将“Button”英文全部选中删除掉；再输入“检查答案”的文字，这样它就成为一个带有“检查答案”字样的按钮了。
- 再执行“窗口”/“公用库”命令；从中挑选一个按钮拖放到舞台上作为一个跳转到下一题目的按钮。如下图：
2_clip_image012.jpg)
- 选中“下一题”按钮，添加如下代码：
on (release) {
nextFrame();
da1="";
da2=""
}
- 选中该图层的第2帧；按F6键插入“关键帧”；
- 然后选中该图层的第1帧的“检查答案”按钮，为其添加如下代码：
on (click) {
if (_root.da1 === "特别的丑") {
_root.da2 = "正确";
}
if (_root.da1 === "特别的美") {
_root.da2 = "错误";
}
if (_root.da1 === "特别不丑") {
_root.da2 = "错误";
}
if (_root.da1 === "丑的特别") {
_root.da2 = "错误";
}
}
特别说明：从上面的代码细心的读者可能已经发现了一个规律：这就是代码中的文本要和第1题题目的选项的文本要保证绝对的一致哦，特别是正确的那一个选项必须要放在上面代码中的“特别的丑”的位置，切记！否则，在测试影片的时侯就要出错了。上面的“正确”和“错误”的文本不用替换。
- 然后选中该图层的第2帧的“检查答案”按钮，为其添加如下代码：
on (click) {
if (_root.da1 === "闪客") {
_root.da2 = "正确";
}
if (_root.da1 === "闪客之家") {
_root.da2 = "错误";
}
if (_root.da1 === "闪客部落") {
_root.da2 = "错误";
}
if (_root.da1 === "闪客俱乐部") {
_root.da2 = "错误";
}
}
特别说明：从上面的代码细心的读者可能已经发现了一个规律：这就是代码中的文本要和第2题题目的选项的文本要保证绝对的一致哦，特别是正确的那一个选项必须要放在上面代码中的“闪客”的位置，切记！否则，在测试影片的时侯就要出错了。上面的“正确”和“错误”的文本不用替换。
〖七〗、创建“代码层”
- 选中“按钮”图层；单击时间轴上的添加新图层按钮，再添加一个新图层；然后双击该图层将其命名为“代码层”
- 选中该图层的第1帧，添加如下代码：
stop();
【八】、收尾工作：
- 选中“背景”图层的第2帧；按键盘上的“F5”键插入“帧”；
- 选中“结果”图层的第2帧；按键盘上的“F5”键插入“帧”；
【九】、最后按“Ctrl+Enter”组合键测试影片
|
